<template>
  <div class="infomation-page">
    <Title />
    <div class="listbox content">
        <ul class="flex">
            <li v-for="item in infoList" :key="item.id" 
                @click="toInfoDetail(item)"
                class="left shadow">
                <Information :info="item" />
            </li>
        </ul>
        <div class="pagebox" style="text-align: center;">
            <el-pagination
            background
            layout="prev, pager, next"
            :page-size="page.pageSize"
            @current-change="changePage"
            :total="total">
            </el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title'
import Api from '@/api'
import Information from './components/Information'

export default {
    components: {
        Title,
        Information
    },
    data() {
        return {
            page: {
                pageNum: 1,
                pageSize: 12
            },
            infoList: [],
            total: 0
        }
    },
    mounted() {
        this.getInformationList()
    },
    methods: {
        toInfoDetail(item) {
            this.$router.push(`/information/${item.id}`)
        },
        getInformationList() {
            Api.getInfoPage(this.page).then(res => {
                this.infoList = res.data.rows || []
                this.total = res.data.total
            })
        },
        changePage(val) {
            this.page.pageNum = val
            this.getInformationList()
        }
    }
}
</script>

<style lang="scss" scoped>
.listbox {
    width: 1200px;
    padding: 20px;
    ul {
        flex-wrap: wrap;
        li {
            width: 23%;
            // margin-right: 20px;
            margin-bottom: 20px;
            cursor: pointer;
            transition: all .3s;
            &:not(:nth-child(4n)) {
                margin-right: calc(8% / 3);
            }
            &:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 10px rgba($color: #000000, $alpha: .3);
            }
        }

    }
    
}
</style>>
